/* === Remove input autofocus webkit === */
*:focus {outline: none;}

/* === Form Typography === */
.paneoform {
    margin: 0 auto;
    width:90%;
    font-size:1.2em;
}

fieldset.alert input,
fieldset.alert select,
fieldset.alert textarea
{
    border:1px solid red !important;
}

div.formalert {
    border:2px solid red !important;
    margin:1%;
    padding:1%;
    text-align:center;
    color:#ffffff;
    background-color:#FF6666;
}

@media only screen and (max-width:480px)
{
.paneoform {
    width:100%;
    font-size:1em !important;
}
}

.form_hint, 
.required_notification {font-size: 1em;}

/* === List Styles === */
.paneoform ul {
    list-style-type:none;
    list-style-position:outside;
    margin:0px;
    padding:0px;
}
.paneoform li{
    padding:1%; 
    border-bottom:1px solid #eee;
    position:relative;
} 
.paneoform li:first-child, .paneoform li:last-child {
    border-bottom:1px solid #777;
}

/* === Form Header === */
.paneoform h2 {
    font-size:1.5em;
    margin:0;
    display: inline;
}
.required_notification {
    color:#d45252; 
    margin:5px 0 0 0; 
    display:inline;
    float:right;
}

/* === Form Elements === */
.paneoform label {
    width:20%;
    margin-top: 0;
    display:inline-block;
    float:left;
    padding: 0;
}

.paneoform input,.paneoform textarea,.paneoform select{
    /*
    height:20px; 
    width:220px; 
    padding:5px 8px;
    */
    font-size:1.2em;
    width:85%;
    padding:1% 1%;
    
}
.paneoform div.formvalue {
    font-size:1.2em;
    min-height:1.2em;
    width:85%;
    padding:1% 1%;
}

.paneoform input[type='radio'] {
    width:auto;
    margin-right:1%;
}
.paneoform input[type='checkbox'] {
    width:auto;
    margin-right:1%;
}

.paneoform textarea {
}

@media only screen and (max-width:480px)
{
.paneoform label {
    width:100%;
    margin-bottom:5px;
}
.paneoform input,.paneoform textarea {
    width:80%;
    margin-bottom:10px;
    font-size:1em;
}
}

/* form element visual styles */
.paneoform input, .paneoform textarea, .paneoform select { 
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
    padding-right:30px;
    -moz-transition: padding .25s; 
    -webkit-transition: padding .25s; 
    -o-transition: padding .25s;
    transition: padding .25s;
}

.paneoform input:focus, .paneoform textarea:focus {
    background: #fff; 
    border:1px solid #555; 
    box-shadow: 0 0 3px #aaa; 
    padding-right:70px;
}

/* === HTML5 validation styles === */   
.paneoform input:required, .paneoform textarea:required {
    background: #fff url(/common/img/red_asterisk.png) no-repeat 98% center;
}
.paneoform input:required:valid, .paneoform textarea:required:valid {
    background: #fff url(/common/img/valid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}
.paneoform input:focus:invalid, .paneoform textarea:focus:invalid {
    background: #fff url(/common/img/invalid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

/* === Form hints === */
.form_hint {
    font-size:.7em;
    margin:1% 20% 1% 0;
}
@media only screen and (max-width:480px)
{
.form_hint {
    margin:0;
    margin-bottom:5px;
}
}
    
/* === Button Style === */
.paneoform fieldset.send {
    text-align:center;
}

button.submit, button.cancel {
    padding:1% 3%;
    margin:1% 3%;
    font-size:1.5em;
}

button.submit:hover {
}

button.submit:active {
}
